<template>
  <div>
    <div style="margin-bottom: 20px;">您可鼠标左键双击钢筋分捆列蓝色数字单元格， 进行钢筋分捆设置</div>

    <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="workArea" label="工区" align="center"></el-table-column>
      <el-table-column prop="number" label="料单编号" align="center"></el-table-column>
      <el-table-column prop="subItem" label="分部分项" align="center"></el-table-column>
      <el-table-column prop="materialListName" label="料单名称" align="center"></el-table-column>
      <el-table-column prop="componentName" label="构件名称" align="center"></el-table-column>
      <el-table-column prop="serialNumber" label="料单序号" align="center"></el-table-column>
      <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
      <el-table-column label="简图" align="center">
        <template slot-scope="scope">
          <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
        </template>
      </el-table-column>
      <el-table-column prop="length" label="下料长度(mm)" align="center" width="120"></el-table-column>
      <el-table-column prop="numberOfRoots" label="根数" align="center"></el-table-column>
      <el-table-column prop="materialCardQuantity" label="料牌数量" align="center">
        <template slot-scope="scope">
          <div style="color: #1990ff;user-select: none;cursor: pointer;" @dblclick="dblclickRow(scope.row)">{{ scope.row.materialCardQuantity }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
    </el-table>

    <open-img-dialog ref="openImgDialog" />
    <material-card-quantity-dialog ref="materialCardQuantityDialog" />
  </div>
</template>

<script>
import openImgDialog from './open-img-dialog.vue'
import materialCardQuantityDialog from './material-card-quantity-dialog.vue'

export default {
  name: "",
  components: { openImgDialog, materialCardQuantityDialog },
  props: {},
  data() {
    return {
      loading: false,
      tableData: [
        {
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          materialCardQuantityDialog: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          materialCardQuantityDialog: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          materialCardQuantityDialog: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '2#TL2',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          materialCardQuantity: 2,
          remarks: '上1排',
        },
      ],

      materialPlateBundlingData: {}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    reset() {
      console.log('重置')
    },
    deliveryData() {
      this.materialPlateBundlingData = {}
      this.$emit('materialPlateBundlingData', this.materialPlateBundlingData)
    },
    imgClick() {
      this.$refs.openImgDialog.add()
    },
    dblclickRow(row) {
      this.$refs.materialCardQuantity.edit(row)
    }
  },
};
</script>

<style scoped lang="scss"></style>
